12. Quiz: Creating the Files

Create Folder and File Structure

• Create a folder for all your future web projects somewhere convenient, for example on your Desktop or in your Documents folder and call the folder “portfolio”.

• Create another folder inside it for this first page, call it “toplist”.

• Create 2 files there - index.html and style.css.

• The structure should look like this:

  • Desktop
    • portfolio
      • toplist
        • index.html
        • style.css

To keep things organized we highly recommend using the file structure described above. Since many of the HTML and CSS files you'll be creating in these lessons have similar names (like index.html), it is recommended that you create a separate folder/directory within portfolio for each mockup (the suggested name for this one is toplist) and save the related HTML and CSS files within it.

Edit the HTML Document

• Open the index.html file in your code editor, and write or copy/paste the following code and save the file:

<div class="title">My App</div>
<div class="app">
    <div class="screenshot">image</div>
    <div class="description">text</div>
</div>

Note: For this quiz, you are not expected to add the image or the description text.

Test the HTML File in a Browser

• Go to the folder, right click the file and choose “Open.. with Google Chrome”.
• Alternatively, in Chrome click "File -> Open File" and then browse to the index.html file and click "Open".

Good job! You just created your first project in this class! It is not quite complete yet, but you made the very important first step.

Continue on to see how you can improve your project!